import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import globalUtil from '../../utils/global';
import userUtil from '../../utils/user';
import BasicListStyles from '../List/BasicList.less';
import {
  Button,
  Icon,
  Form,
  Input,
  Radio,
  notification,
  Modal,
  Upload,
} from 'antd';
import apiconfig from '../../../config/api.config';
import cookie from '../../utils/cookie';

const token = cookie.get('token');
const myheaders = {};
if (token) {
  myheaders.Authorization = `GRJWT ${token}`;
  myheaders.X_REGION_NAME = globalUtil.getCurrRegionName();
  myheaders.X_TEAM_NAME = globalUtil.getCurrTeamName();
}

// 上传文件
@connect(
  ({ user, groupControl, global, loading }) => ({
    rainbondInfo: global.rainbondInfo,
    loading,
  }),
  null,
  null,
  { pure: false }
)
@Form.create()
export default class UploadFile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
  }
  handleOk = () => {
    const file = this.state.fileList;
    if (file.length == 0) {
      notification.info({
        message: '您还没有上传文件',
      });
      return;
    }
    if (file[0].status != 'done') {
      notification.info({
        message: '正在上传请稍后',
      });
      return;
    }
    const file_name = file[0].name;
    const event_id = file[0].response.data.bean.event_id;
    this.props.dispatch({
      type: 'market/importApp',
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        scope: 'enterprise',
        event_id,
        file_name,
      },
      callback: data => {
        if (data) {
          notification.success({ message: `操作成功，正在导入` });
          this.props.onOk && this.props.onOk(data);
        }
      },
    });
  };
  onChange = info => {
    let fileList = info.fileList;
    fileList = fileList.filter(file => {
      if (file.response) {
        return file.response.msg === 'success';
      }
      return true;
    });
    this.setState({ fileList });
  };
  onRemove = () => {
    this.setState({ fileList: [] });
  };
  render() {
    const form = this.props.form;
    const { getFieldDecorator } = form;
    const team_name = globalUtil.getCurrTeamName();
    const uploadUrl =
      `${apiconfig.baseUrl  }/console/teams/${  team_name  }/apps/upload`;
    const fileList = this.state.fileList;

    return (
      <Modal
        visible
        onOk={this.handleOk}
        onCancel={this.props.onCancel}
        title="请上传应用模板"
        okText="确定上传"
      >
        <Upload
          action={uploadUrl}
          fileList={fileList}
          onChange={this.onChange}
          onRemove={this.onRemove}
          headers={myheaders}
        >
          {fileList.length > 0 ? null : <Button>请选择文件</Button>}
        </Upload>
      </Modal>
    );
  }
}
